<template>
  <div class="goodsindex">
    <!-- 搜索条件 -->
    <el-row :gutter="20" class="goodsindex-queryInfo">
      <!-- 商品名称搜索 -->
      <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
        <el-input
          class="goodsindex-queryInfo-li"
          v-model="queryInfo.goodsName"
          clearable
          size="small"
          placeholder="请输入商品名称"
        ></el-input>
      </el-col>
      <!-- 商品分类搜索 -->
      <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
        <el-button
          type="primary"
          class="goodsindex-queryInfo-li"
          size="small"
          @click="initData()"
          >搜索</el-button
        >
      </el-col>
    </el-row>
    <!-- 检索结果 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24">
        <el-table
          :data="tableData.records"
          border
          v-loading="loading"
          size="small"
          style="width: 100%"
        >
          <el-table-column type="index" label="序" width="50">
          </el-table-column>
          <el-table-column prop="userName" label="用户" width="180">
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" width="150">
          </el-table-column>
          <el-table-column prop="storeName" label="门店名称" width="150">
          </el-table-column>
          <el-table-column prop="goodsNum" label="商品数量" width="150">
          </el-table-column>
          <el-table-column prop="preMoney" label="应付金额" width="150">
          </el-table-column>
          <el-table-column prop="couponMoney" label="优惠金额" width="150">
          </el-table-column>
          <el-table-column prop="payMoney" label="支付金额" width="150">
          </el-table-column>
        
          <el-table-column :formatter="getState" prop="state" label="支付状态" width="150">
          </el-table-column>
          <el-table-column
            :formatter="dateFormat"
            prop="payTime"
            label="支付时间"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="payId" label="订单Id" width="150">
          </el-table-column>
          <el-table-column
            :formatter="getErrorStatus"
            prop="errorStatus"
            label="异常状态"
            width="150"
          >
          </el-table-column>
          <el-table-column
            :formatter="getOrderStatus"
            prop="orderStatus"
            label="订单状态"
            width="150"
          >
          </el-table-column>

          <el-table-column
            prop="goodsRemarkType"
            :formatter="type"
            label="商品备注"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="goodsSellType"
            :formatter="sellType"
            label="售卖类型"
            width="100"
          >
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24" class="goodsindex-page-box">
        <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="提示" :visible.sync="account" width="30%">
      <el-row>
        <span>账号：</span>
        <span>{{ account ? account.account : "" }}</span>
      </el-row>
      <el-row>
        <span>密码：</span>
        <span>{{ account ? account.noMd5 : "" }}</span>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="account = null">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import { Switch } from "element-ui";
export default {
  data() {
    return {
      dialogVisible: false,
      select: "",
      queryInfo: {
        goodsName: "",
        page: 1,
        pageSize: 10,
      },
      selected: null,
      options: [],
      loading: true,
      tableData: [],
      account: null,
    };
  },
  watch: {
    selected(val) {
      console.log(val);
    },
  },
  async created() {
    this.initData();
  },
  methods: {
    async initData() {
      let list = await this.http.post("/storeOrder/queryPage", {
        pageSize: this.queryInfo.pageSize,
        pageNo: this.queryInfo.page,
        query: {
          ...this.queryInfo,
        },
      });
      this.tableData = list.result;
      this.loading = false;
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize = size;
      this.initData();
    },
    handleCurrentChange(currentPage) {
      this.queryInfo.pageNo = currentPage;
      this.initData();
    },
    to(url) {
      this.$router.push({ path: url });
    },
    type(row) {
      switch (row.goodsRemarkType) {
        case 1:
          return "普通商品";
          break;
        case 2:
          return "月卡";
          break;
        case 3:
          return "会员";
          break;
        case 4:
          return "服务";
          break;

        default:
          break;
      }
    },
    getState(row){
      if(row.state){
        return "已支付"
      }else {
        return "未支付"
      }
    },
    getErrorStatus(row) {
      if (row.errorStatus != 0) {
        return "异常";
      } else {
        return "未异常";
      }
    },

    getOrderStatus(row) {
      switch (row.orderStatus) {
        case 0:
          return "支付未完成";
          break;
        case 1:
          return "支付完成待店家核销";
          break;
        case 2:
          return "订单完成";
          break;
      }
    },

    sellType(row) {
      switch (row.goodsSellType) {
        case 1:
          return "艾家服务";
          break;
        case 2:
          return "一周严选";
          break;
        case 3:
          return "品牌推荐";
          break;

        default:
          break;
      }
    },
    stateFormat(row, column) {
      if (row.status === 0) return "禁用";
      else return "正常";
    },
    dateFormat(row, column) {
      let date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>

<style scoped>
.goodsindex {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
/* 搜索 */
.goodsindex-queryInfo {
  margin-bottom: 10px;
}
.goodsindex-queryInfo-li {
  width: 100%;
  height: auto;
}
/* 列表 */
.goodsindex-list {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
/* 分页 */
.goodsindex-page-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
}
</style>